<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<body>
<!--p*3+ul>li*3>p-->
<p  class="active">p1</p>
<p >p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<style>
    /*选择器	类   型	功能描述*/
    /*E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内*/
    /*E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素*/
    /*E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面*/
    /*E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素*/
    .active{

    }
    /*后代选择器*/
    body p{
        background: red;
    }
    /*子选择器*/
    body>p{
        background: green;
    }
    /*相邻，只作用后面兄弟*/
    .active+p{
        background: blue;
    }
    /*通用，只作用后面所有兄弟*/
    .active~p{
        background: black;
    }
</style>
</body>
</html>